<template>
  <!-- <div ref="mapContainer" class="map-container"></div> -->
  <div id="map"></div>
</template>

<script>
import * as ROSLIB from 'roslib';
import * as ROS3D from 'ros3d';

export default {
  name: 'MapViewer',
  mounted() {
    // 创建 ROS 连接
    const ros = new ROSLIB.Ros({
      url: 'ws://192.168.0.137:9090' // 修改为你的 ROS WebSocket 服务器地址
    });

    ros.on('connection', () => {
      console.log('Connected to ROS');
      this.initializeMap(ros);
    });

    ros.on('error', (error) => {
      console.log('Error connecting to ROS:', error);
    });

    ros.on('close', () => {
      console.log('Connection to ROS closed');
    });
  },
  methods: {
    initializeMap(ros) {

      // 将地图添加到 DOM
      const viewer = new ROS3D.Viewer({
        divID : 'map',
        width : 800,
        height : 600,
        // antialias : true,
        // background: '#ffffff',
      });

      // 创建地图客户端
      const mapClient = new ROS3D.OccupancyGridClient({
        ros: ros,
        rootObject: viewer.scene,
        // tfClient: new ROS3D.TFClient({
        //   ros: ros,
        //   fixedFrame: 'map',
        //   rate: 10
        // }),
        topic: '/map', // 订阅地图话题
        colors: {
          // 占用颜色
          occupied: '#ff0000',  // 红色
          // 空闲颜色
          free: '#00ff00',      // 绿色
          // 未知颜色
          unknown: '#0000ff'    // 蓝色
        },
      });

    }
  },
  beforeDestroy() {
    // 在组件销毁时关闭连接
    if (this.ros) {
      this.ros.close();
    }
  }
}
</script>

